<!--  -->
<script setup>
import { listFuturePiApi } from '@/server/api/futurePi';
import { ref, onMounted } from "vue"
import { useUseStore } from '@/stores/user';
import { useI18n } from "vue-i18n";

const { t } = useI18n();
//获取条件
const searchCondition = ref({
    page: 1,
    limit: 10,
    uid: useUseStore().userId
});

//协议列表
const portocolList = ref([]);
//记录多少条协议
const count = ref(0);

//获取协议
const listFuturePi = async () => {
    const res = await listFuturePiApi(searchCondition.value);
    // console.log(res, "res");
    if (res.data.code == 200) {
        portocolList.value = res.data.data.list;
        if (count.value == 0) {
            count.value = res.data.data.count;
        }
    }
};

//上一页
const previousPage = () => {
    searchCondition.value.page += -1;
    listFuturePi();
}
//下一页
const lastPage = () => {
    searchCondition.value.page += 1;
    if (searchCondition.value.page > (count / searchCondition.value.limit)) {
        searchCondition.value.page += -1;
        console.log(count / searchCondition.value.limit);
        console.log("没有下一页");
        return false;
    }
    listFuturePi();
}
//换页
const changePage = () => {
    if (searchCondition.value.page > (count.value / searchCondition.value.limit)) {
        searchCondition.value.page = 1
        listFuturePi();
    } else {
        listFuturePi();
    }
}
onMounted(() => {
    // 获取协议
    listFuturePi();
})
</script>

<template>
    <div class="futurePiHistory">
        <div class="top">
            <ExchangeOrderTop :title="$t('protocolHistory.record')" />
            <!-- <ExchangeOrderTop :title="$t('exchange.order')" /> -->
        </div>
        <div class="listDiv" v-for="list in portocolList" :key="list.protocolId">
            <p>{{ $t("protocolHistory.IdentificationNumber") }} {{ list.protocolId }}</p>
            <span>{{ $t("protocolHistory.expect") }}：<em>{{ list.exchangeRate }}</em>eCNY:<em>1</em>Pi</span><br />
            <span>{{ $t("protocolHistory.settlement") }}
                ：
                {{ list.total }}eCNY</span><br />
            <span v-if="list.status == 0">{{ $t("protocolHistory.status") }}:{{ $t("protocolHistory.work")
                }}</span><br />
            <!-- 2:终止并结算完毕 1:终止，未结算 -->
            <span v-if="list.status > 0">{{ $t("protocolHistory.status") }}:{{ list.status > 1 ?
                $t('protocolHistory.completed') : $t('protocolHistory.over')
                }}</span><br />
            <span>{{ $t("protocolHistory.expiration") }}</span><br />
            <span v-if="list.status > 0">{{ list.startTime }} {{ list.endTime }}</span>
            <span v-if="list.status == 0">{{ list.startTime }} {{ $t("protocolHistory.now") }}</span>
        </div>
        <footer v-if="count > 0">
            <div v-if="searchCondition.page * searchCondition.limit > 1 * searchCondition.limit" @click="previousPage">
                {{ $t("protocolHistory.previous") }}</div>
            <div v-if="count > searchCondition.page * searchCondition.limit"><input type="number"
                    v-model="searchCondition.page" min="1" step="1" @change="changePage"></div>
            <div v-if="count > searchCondition.page * searchCondition.limit" @click="lastPage">
                {{ $t("protocolHistory.next") }}</div>
        </footer>
    </div>

</template>

<style scoped lang="scss">
.futurePiHistory {
    .listDiv {
        width: 96%;
        border-radius: 10px;
        border: 1px solid gainsboro;
        height: auto;
        margin: auto;
        margin-top: 5px;
        padding-left: 2px;

        p {
            font-size: 12px;
        }

        span {
            font-size: 14px;

            em {
                color: #642e8e;
                font-size: 16px;
            }
        }
    }

    footer {
        display: flex;
        height: 20%;
        font-size: 16px;
    }
}
</style>
